{% load static%}
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
  <meta name="description"
    content="个性化个性化健康饮食推荐系统，基于身体数据定制膳食方案，支持饮食记录、营养分析、食谱管理" />
  <meta name="keywords" content="健康饮食,个性化推荐,营养管理,饮食记录,食谱库" />
  <meta name="author" content="yxw,2058570743@qq.com" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
  <meta name="HandheldFriendly" content="true" />
  <meta name="MobileOptimized" content="320" />
  <meta name="apple-mobile-web-app-title" content="健康饮食推荐" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no,email=no" />
  <meta name="renderer" content="webkit" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="msapplication-tap-highlight" content="no" />
  <meta name="x5-orientation" content="portrait" />
  <meta name="x5-fullscreen" content="true" />
  <meta name="x5-page-mode" content="app" />
  <link rel="apple-touch-icon-precomposed" href="{% static 'mobile/img/icon-57x57.png' %}" sizes="57x57" />
  <link rel="apple-touch-icon-precomposed" href="{% static 'mobile/img/icon-114x114.png' %}" sizes="114x114" />
  <link rel="apple-touch-icon-precomposed" href="{% static 'mobile/img/icon-144x144.png' %}" sizes="144x144" />
  <link rel="apple-touch-startup-image" href="{% static 'mobile/img/startup-768x1004.png' %}" sizes="768x1004" />
  <link rel="apple-touch-startup-image" href="{% static 'mobile/img/startup-1536x2008.png' %}" sizes="1536x2008" />
  <link rel="apple-touch-startup-image" href="{% static 'mobile/img/startup-1024x748.png' %}" sizes="1024x748" />
  <meta name="msapplication-TileColor" content="#0abab5" />
  <meta name="msapplication-TileImage" content="{% static 'mobile/img/icon-144x144.png' %}" />
  <link rel="shortcut icon" type="image/ico" href="{% static 'mobile/img/favicon.ico' %}" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://yourdomain.com" />
  <meta property="og:title" content="个性化健康饮食推荐系统" />
  <meta property="og:image" content="{% static 'mobile/img/share-cover.png' %}" />
  <meta property="og:description" content="基于身体数据的智能饮食管理工具，定制膳食方案，守护健康" />
  <title>个性化健康饮食推荐系统</title>
  
  <!-- 图标库 -->
  <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4085599_8k3c0t5k8s9.css" />
  <!-- 基础样式 -->
  <link rel="stylesheet" href="{% static 'mobile/css/normalize.css' %}" />
  <style>
    /* 1. 全局基础 - 健康自然风格 */
    :root {
      --color-primary: #0abab5; /* Tiffany蓝绿色（主色调） */
      --color-primary-light: #4ee4dd; /* 浅蓝绿色（交互反馈） */
      --color-bg: #f0f7f7; /* 浅蓝色背景（替代全白，更协调） */
      --color-card: #ffffff; /* 卡片白（内容承载） */
      --color-text-main: #1f2937; /* 深灰（主文本） */
      --color-text-secondary: #6b7280; /* 中灰（次要文本） */
      --color-text-light: #d1d5db; /* 浅灰（辅助线/弱提示） */
      --radius: 10px; /* 统一圆角（自然柔和） */
      --shadow: 0 2px 10px rgba(0,0,0,0.04); /* 轻阴影（分层不刺眼） */
      --transition: all 0.3s ease; /* 统一过渡 */
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 14px;
      color: var(--color-text-main);
      background-color: var(--color-bg);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    /* 2. 顶部导航 - 简洁自然 */
    .top-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      background-color: var(--color-card);
      box-shadow: var(--shadow);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      z-index: 999;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 16px;
      font-weight: 600;
      color: var(--color-primary);
    }

    .logo .iconfont {
      font-size: 20px;
    }

    .user-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid var(--color-primary-light);
    }

    .user-btn img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 3. 功能快捷栏 - 横向滚动+自然布局 */
    .function-bar {
      position: fixed;
      top: 50px;
      left: 0;
      width: 100%;
      height: 60px;
      background-color: var(--color-card);
      display: flex;
      align-items: center;
      padding: 0 12px;
      gap: 16px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      border-bottom: 1px solid var(--color-text-light);
      z-index: 998;
    }

    .function-bar::-webkit-scrollbar {
      display: none;
    }

    .function-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 60px;
      color: var(--color-text-secondary);
      transition: var(--transition);
      cursor: pointer;
    }

    .function-item.active,
    .function-item:hover {
      color: var(--color-primary);
    }

    .function-icon {
      font-size: 22px;
      margin-bottom: 4px;
    }

    .function-name {
      font-size: 11px;
      white-space: nowrap;
    }

    /* 4. 主内容区 - 自然留白+模块分明 */
    .content {
      margin-top: 110px; /* 顶部导航+功能栏高度 */
      padding: 0 18px 70px; /* 底部导航高度留白 */
    }

    /* 模块标题 - 自然强调 */
    .module-title {
      font-size: 17px;
      font-weight: 600;
      color: var(--color-text-main);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .module-title .iconfont {
      color: var(--color-primary);
    }

    /* 5. 核心模块样式 - 自然承载内容 */
    /* 今日推荐模块 */
    .today-recommend {
      margin-bottom: 24px;
    }

    .recommend-card {
      background-color: var(--color-card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-bottom: 16px;
    }

    .recommend-header {
      padding: 14px 16px;
      border-bottom: 1px solid var(--color-text-light);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .meal-time {
      font-size: 15px;
      font-weight: 500;
      color: var(--color-text-main);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .meal-time .iconfont {
      color: var(--color-primary);
    }

    .nutri-tag {
      font-size: 11px;
      color: var(--color-primary);
      background-color: rgba(10, 186, 181, 0.1);
      padding: 2px 8px;
      border-radius: 12px;
    }

    .recommend-body {
      padding: 16px;
    }

    .meal-img {
      width: 100%;
      height: 160px;
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 12px;
    }

    .meal-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .meal-desc {
      color: var(--color-text-secondary);
      margin-bottom: 12px;
      line-height: 1.5;
    }

    .meal-nutri {
      display: flex;
      gap: 16px;
      color: var(--color-text-secondary);
      font-size: 12px;
    }

    .meal-nutri span {
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .add-plan-btn {
      width: 100%;
      height: 38px;
      margin-top: 14px;
      background-color: var(--color-primary);
      color: #fff;
      border: none;
      border-radius: var(--radius);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: var(--transition);
    }

    .add-plan-btn:hover {
      background-color: var(--color-primary-light);
    }

    /* 饮食记录模块 */
    .diet-record {
      margin-bottom: 24px;
    }

    .record-card {
      background-color: var(--color-card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
    }

    .record-form {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .form-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .form-label {
      font-size: 13px;
      color: var(--color-text-secondary);
      font-weight: 500;
    }

    .form-input {
      height: 40px;
      padding: 0 12px;
      border: 1px solid var(--color-text-light);
      border-radius: var(--radius);
      font-size: 14px;
      color: var(--color-text-main);
      transition: var(--transition);
    }

    .form-input:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 2px rgba(10, 186, 181, 0.1);
    }

    .form-textarea {
      min-height: 80px;
      padding: 12px;
      resize: none;
    }

    /* 6. 底部导航 - 固定+自然交互 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 55px;
      background-color: var(--color-card);
      box-shadow: 0 -2px 10px rgba(0,0,0,0.04);
      display: flex;
      align-items: center;
      justify-content: space-around;
      z-index: 999;
    }

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--color-text-secondary);
      text-decoration: none;
      transition: var(--transition);
    }

    .nav-item.active {
      color: var(--color-primary);
    }

    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }

    .nav-name {
      font-size: 11px;
    }

    /* 7. 模块切换 - 自然隐藏/显示 */
    .content-module {
      display: none;
      animation: fadeIn 0.5s ease;
    }

    .content-module.active {
      display: block;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* 8. 响应式适配 - 小屏优化 */
    @media (max-width: 375px) {
      .function-item {
        min-width: 50px;
      }
      .function-icon {
        font-size: 20px;
      }
      .meal-img {
        height: 140px;
      }
      .content {
        padding: 0 14px 70px;
      }
    }
  </style>
</head>

<body>

  <!-- 顶部导航 - 简洁承载系统名称与用户入口 -->
  <nav class="top-nav">
    <div class="logo">
      <i class="iconfont icon-yingyang"></i>
      <span>健康饮食推荐</span>
    </div>
    <div class="user-btn" onclick="goToUserCenter()">
      <img src="{% static 'mobile/img/user-avatar.png' %}" alt="用户头像">
    </div>
  </nav>

  <!-- 功能快捷栏 - 横向滚动，自然触达核心功能 -->
  <div class="function-bar">
    <div class="function-item active" onclick="switchModule('recommend')">
      <div class="function-icon iconfont icon-tuijian"></div>
      <div class="function-name">今日推荐</div>
    </div>
    <div class="function-item" onclick="switchModule('record')">
      <div class="function-icon iconfont icon-jilu"></div>
      <div class="function-name">饮食记录</div>
    </div>
    <div class="function-item" onclick="switchModule('analysis')">
      <div class="function-icon iconfont icon-fenxi"></div>
      <div class="function-name">营养分析</div>
    </div>
    <div class="function-item" onclick="switchModule('recipe')">
      <div class="function-icon iconfont icon-caipu"></div>
      <div class="function-name">食谱库</div>
    </div>
    <div class="function-item" onclick="switchModule('plan')">
      <div class="function-icon iconfont icon-riqi"></div>
      <div class="function-name">饮食计划</div>
    </div>
    <!-- 已删除顶部导航栏中的实用工具 -->
  </div>

  <!-- 主内容区 - 模块分明，自然切换 -->
  <div class="content">
    <!-- 1. 今日推荐模块 -->
    <div class="content-module active" id="recommend">
      <div class="today-recommend">
        <h2 class="module-title">
          <i class="iconfont icon-tuijian"></i>
          今日个性化推荐
        </h2>
        
        <!-- 早餐推荐 -->
        <div class="recommend-card">
          <div class="recommend-header">
            <div class="meal-time">
              <i class="iconfont icon-zaocan"></i>
              早餐
            </div>
            <div class="nutri-tag">低脂·高蛋白</div>
          </div>
          <div class="recommend-body">
            <div class="meal-img">
              <img src="{% static 'mobile/img/breakfast.jpg' %}" alt="早餐推荐">
            </div>
            <div class="meal-desc">
              全麦吐司2片 + 水煮蛋1个 + 无糖牛奶250ml + 蓝莓50g<br>
              推荐理由：快速补充上午所需能量，蛋白质丰富，升糖指数低
            </div>
            <div class="meal-nutri">
              <span><i class="iconfont icon-redian"></i> 320大卡</span>
              <span><i class="iconfont icon-danbai"></i> 18g蛋白质</span>
              <span><i class="iconfont icon-weiqigan"></i> 5g纤维</span>
            </div>
            <button class="add-plan-btn" onclick="addToPlan('breakfast')">加入今日计划</button>
          </div>
        </div>
        
        <!-- 午餐推荐 -->
        <div class="recommend-card">
          <div class="recommend-header">
            <div class="meal-time">
              <i class="iconfont icon-wucan"></i>
              午餐
            </div>
            <div class="nutri-tag">均衡·高纤维</div>
          </div>
          <div class="recommend-body">
            <div class="meal-img">
              <img src="{% static 'mobile/img/lunch.jpg' %}" alt="午餐推荐">
            </div>
            <div class="meal-desc">
              糙米饭100g + 清蒸鲈鱼120g + 清炒西兰花200g + 番茄蛋汤1碗<br>
              推荐理由：优质蛋白+复合碳水+绿叶蔬菜，营养均衡易吸收
            </div>
            <div class="meal-nutri">
              <span><i class="iconfont icon-redian"></i> 520大卡</span>
              <span><i class="iconfont icon-danbai"></i> 32g蛋白质</span>
              <span><i class="iconfont icon-weiqigan"></i> 8g纤维</span>
            </div>
            <button class="add-plan-btn" onclick="addToPlan('lunch')">加入今日计划</button>
          </div>
        </div>
        
        <!-- 晚餐推荐 -->
        <div class="recommend-card">
          <div class="recommend-header">
            <div class="meal-time">
              <i class="iconfont icon-wancan"></i>
              晚餐
            </div>
            <div class="nutri-tag">低卡·易消化</div>
          </div>
          <div class="recommend-body">
            <div class="meal-img">
              <img src="{% static 'mobile/img/dinner.jpg' %}" alt="晚餐推荐">
            </div>
            <div class="meal-desc">
              鸡胸肉沙拉（鸡胸肉80g+混合蔬菜200g） + 希腊酸奶100g<br>
              推荐理由：低热量高营养，晚餐后易消化，不增加肠胃负担
            </div>
            <div class="meal-nutri">
              <span><i class="iconfont icon-redian"></i> 280大卡</span>
              <span><i class="iconfont icon-danbai"></i> 25g蛋白质</span>
              <span><i class="iconfont icon-weiqigan"></i> 7g纤维</span>
            </div>
            <button class="add-plan-btn" onclick="addToPlan('dinner')">加入今日计划</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 2. 饮食记录模块 -->
    <div class="content-module" id="record">
      <div class="diet-record">
        <h2 class="module-title">
          <i class="iconfont icon-jilu"></i>
          今日饮食记录
        </h2>
        <div class="record-card">
          <form class="record-form" onsubmit="saveRecord(event)">
            <div class="form-row">
              <label class="form-label">记录日期</label>
              <input type="date" class="form-input" id="recordDate" required>
            </div>
            <div class="form-row">
              <label class="form-label">餐次类型</label>
              <select class="form-input" id="mealType" required>
                <option value="">请选择餐次</option>
                <option value="breakfast">早餐</option>
                <option value="lunch">午餐</option>
                <option value="dinner">晚餐</option>
                <option value="snack">加餐</option>
              </select>
            </div>
            <div class="form-row">
              <label class="form-label">饮食内容</label>
              <textarea class="form-input form-textarea" id="mealContent" placeholder="例如：早餐：全麦面包2片+低脂牛奶250ml；烹饪方式：蒸" required></textarea>
            </div>
            <div class="form-row">
              <label class="form-label">营养估算（可选）</label>
              <input type="text" class="form-input" placeholder="例如：热量300大卡，蛋白质15g">
            </div>
            <button type="submit" class="add-plan-btn">保存记录</button>
          </form>
        </div>
      </div>
    </div>

    <!-- 3. 营养分析模块 -->
    <div class="content-module" id="analysis">
      <h2 class="module-title">
        <i class="iconfont icon-fenxi"></i>
        营养分析报告
      </h2>
      <div class="record-card" style="margin-bottom: 16px;">
        <div style="margin-bottom: 16px; color: var(--color-text-secondary);">
          基于近7天饮食记录生成（目标：轻运动成年用户）
        </div>
        
        <!-- 蛋白质分析 -->
        <div style="margin-bottom: 16px;">
          <div style="display: flex; justify-content: space-between; margin-bottom: 6px;">
            <span style="font-size: 14px; font-weight: 500;">蛋白质摄入</span>
            <span style="font-size: 12px; color: var(--color-text-secondary);">82g/天（推荐70-90g）</span>
          </div>
          <div style="width: 100%; height: 6px; background-color: var(--color-text-light); border-radius: 3px; overflow: hidden;">
            <div style="width: 85%; height: 100%; background-color: var(--color-primary);"></div>
          </div>
          <p style="font-size: 12px; color: var(--color-primary); margin-top: 4px;">
            ✅ 摄入量达标，优质蛋白（鱼、蛋、奶）占比65%，建议保持
          </p>
        </div>
        
        <!-- 碳水分析 -->
        <div style="margin-bottom: 16px;">
          <div style="display: flex; justify-content: space-between; margin-bottom: 6px;">
            <span style="font-size: 14px; font-weight: 500;">碳水化合物</span>
            <span style="font-size: 12px; color: var(--color-text-secondary);">210g/天（建议≤180g）</span>
          </div>
          <div style="width: 100%; height: 6px; background-color: var(--color-text-light); border-radius: 3px; overflow: hidden;">
            <div style="width: 115%; height: 100%; background-color: #f59e0b;"></div>
          </div>
          <p style="font-size: 12px; color: #f59e0b; margin-top: 4px;">
            ⚠️ 摄入量偏高，精制碳水（白米饭、面条）占比过高，建议替换为杂粮
          </p>
        </div>
        
        <!-- 纤维分析 -->
        <div>
          <div style="display: flex; justify-content: space-between; margin-bottom: 6px;">
            <span style="font-size: 14px; font-weight: 500;">膳食纤维</span>
            <span style="font-size: 12px; color: var(--color-text-secondary);">16g/天（推荐≥20g）</span>
          </div>
          <div style="width: 100%; height: 6px; background-color: var(--color-text-light); border-radius: 3px; overflow: hidden;">
            <div style="width: 80%; height: 100%; background-color: #3b82f6;"></div>
          </div>
          <p style="font-size: 12px; color: #3b82f6; margin-top: 4px;">
            ⚠️ 摄入量不足，建议增加绿叶蔬菜（菠菜、西兰花）及菌菇类摄入
          </p>
        </div>
      </div>
      <button class="add-plan-btn" style="width: 100%;" onclick="viewDetailReport()">查看详细报告</button>
    </div>

    <!-- 4. 食谱库模块 -->
    <div class="content-module" id="recipe">
      <h2 class="module-title">
        <i class="iconfont icon-caipu"></i>
        健康食谱库
      </h2>
      <div class="record-card" style="margin-bottom: 16px;">
        <div style="display: flex; gap: 12px; margin-bottom: 16px;">
          <div style="flex: 1; position: relative;">
            <input type="text" class="form-input" placeholder="搜索食谱或食材">
            <i class="iconfont icon-sousuo" style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-secondary);"></i>
          </div>
        </div>
        
        <!-- 食谱分类标签 -->
        <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;">
          <span style="padding: 4px 12px; background-color: rgba(10, 186, 181, 0.1); color: var(--color-primary); border-radius: 16px; font-size: 12px; cursor: pointer;">全部</span>
          <span style="padding: 4px 12px; background-color: var(--color-bg); color: var(--color-text-secondary); border-radius: 16px; font-size: 12px; cursor: pointer;">低脂</span>
          <span style="padding: 4px 12px; background-color: var(--color-bg); color: var(--color-text-secondary); border-radius: 16px; font-size: 12px; cursor: pointer;">高蛋白</span>
          <span style="padding: 4px 12px; background-color: var(--color-bg); color: var(--color-text-secondary); border-radius: 16px; font-size: 12px; cursor: pointer;">素食</span>
          <span style="padding: 4px 12px; background-color: var(--color-bg); color: var(--color-text-secondary); border-radius: 16px; font-size: 12px; cursor: pointer;">快手菜</span>
        </div>
        
        <!-- 食谱列表 -->
        <div style="display: flex; flex-direction: column; gap: 12px;">
          <div style="display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--radius); background-color: var(--color-bg); cursor: pointer;">
            <div style="width: 60px; height: 60px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0;">
              <img src="{% static 'mobile/img/recipe1.jpg' %}" alt="食谱" style="width: 100%; height: 100%; object-fit: cover;">
            </div>
            <div style="flex: 1;">
              <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">香煎鸡胸肉沙拉</div>
              <div style="font-size: 12px; color: var(--color-text-secondary); display: flex; gap: 8px;">
                <span><i class="iconfont icon-redian"></i> 280大卡</span>
                <span><i class="iconfont icon-clock"></i> 15分钟</span>
              </div>
            </div>
          </div>
          <div style="display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--radius); background-color: var(--color-bg); cursor: pointer;">
            <div style="width: 60px; height: 60px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0;">
              <img src="{% static 'mobile/img/recipe2.jpg' %}" alt="食谱" style="width: 100%; height: 100%; object-fit: cover;">
            </div>
            <div style="flex: 1;">
              <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">杂粮糙米饭套餐</div>
              <div style="font-size: 12px; color: var(--color-text-secondary); display: flex; gap: 8px;">
                <span><i class="iconfont icon-redian"></i> 350大卡</span>
                <span><i class="iconfont icon-clock"></i> 20分钟</span>
              </div>
            </div>
          </div>
          <div style="display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--radius); background-color: var(--color-bg); cursor: pointer;">
            <div style="width: 60px; height: 60px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0;">
              <img src="{% static 'mobile/img/recipe3.jpg' %}" alt="食谱" style="width: 100%; height: 100%; object-fit: cover;">
            </div>
            <div style="flex: 1;">
              <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">清蒸鲈鱼套餐</div>
              <div style="font-size: 12px; color: var(--color-text-secondary); display: flex; gap: 8px;">
                <span><i class="iconfont icon-redian"></i> 320大卡</span>
                <span><i class="iconfont icon-clock"></i> 25分钟</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <button class="add-plan-btn" style="width: 100%;">查看更多食谱</button>
    </div>

    <!-- 5. 饮食计划模块 -->
    <div class="content-module" id="plan">
      <h2 class="module-title">
        <i class="iconfont icon-riqi"></i>
        我的饮食计划
      </h2>
      <div class="record-card" style="margin-bottom: 16px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
          <div style="font-size: 14px; font-weight: 500;">2024年6月15日 饮食计划</div>
          <button style="padding: 4px 12px; background-color: var(--color-primary); color: #fff; border: none; border-radius: 4px; font-size: 12px; cursor: pointer;">编辑计划</button>
        </div>
        
        <!-- 计划列表 -->
        <div style="display: flex; flex-direction: column; gap: 12px;">
          <div style="padding: 12px; border-radius: var(--radius); background-color: rgba(10, 186, 181, 0.05); border-left: 3px solid var(--color-primary);">
            <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
              <span style="font-size: 14px; font-weight: 500;">早餐</span>
              <span style="font-size: 12px; color: var(--color-primary);">已完成</span>
            </div>
            <div style="font-size: 12px; color: var(--color-text-secondary);">全麦吐司2片 + 水煮蛋1个 + 无糖牛奶250ml</div>
          </div>
          <div style="padding: 12px; border-radius: var(--radius); background-color: rgba(10, 186, 181, 0.05); border-left: 3px solid var(--color-primary);">
            <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
              <span style="font-size: 14px; font-weight: 500;">午餐</span>
              <span style="font-size: 12px; color: #f59e0b;">未完成</span>
            </div>
            <div style="font-size: 12px; color: var(--color-text-secondary);">糙米饭100g + 清蒸鲈鱼120g + 清炒西兰花200g</div>
          </div>
          <div style="padding: 12px; border-radius: var(--radius); background-color: rgba(10, 186, 181, 0.05); border-left: 3px solid var(--color-primary);">
            <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
              <span style="font-size: 14px; font-weight: 500;">晚餐</span>
              <span style="font-size: 12px; color: #f59e0b;">未完成</span>
            </div>
            <div style="font-size: 12px; color: var(--color-text-secondary);">鸡胸肉沙拉 + 希腊酸奶100g</div>
          </div>
        </div>
      </div>
      <div style="display: flex; gap: 12px;">
        <button class="add-plan-btn" style="flex: 1;">生成明日计划</button>
        <button class="add-plan-btn" style="flex: 1; background-color: #6b7280;">查看历史计划</button>
      </div>
    </div>

    <!-- 6. 实用工具模块 -->
    <div class="content-module" id="tools">
      <h2 class="module-title">
        <i class="iconfont icon-gongju"></i>
        健康饮食工具
      </h2>
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;">
        <div class="record-card" style="margin-bottom: 0; cursor: pointer;" onclick="openTool('calorie')">
          <div style="display: flex; flex-direction: column; align-items: center; padding: 16px 0;">
            <div class="function-icon iconfont icon-redian" style="font-size: 28px; color: var(--color-primary); margin-bottom: 8px;"></div>
            <div style="font-size: 15px; font-weight: 500; margin-bottom: 4px;">热量计算器</div>
            <div style="font-size: 12px; color: var(--color-text-secondary); text-align: center;">输入食材查热量</div>
          </div>
        </div>
        <div class="record-card" style="margin-bottom: 0; cursor: pointer;" onclick="openTool('bmi')">
          <div style="display: flex; flex-direction: column; align-items: center; padding: 16px 0;">
            <div class="function-icon iconfont icon-tizhong" style="font-size: 28px; color: var(--color-primary); margin-bottom: 8px;"></div>
            <div style="font-size: 15px; font-weight: 500; margin-bottom: 4px;">BMI计算器</div>
            <div style="font-size: 12px; color: var(--color-text-secondary); text-align: center;">算体重健康度</div>
          </div>
        </div>
        <div class="record-card" style="margin-bottom: 0; cursor: pointer;" onclick="openTool('water')">
          <div style="display: flex; flex-direction: column; align-items: center; padding: 16px 0;">
            <div class="function-icon iconfont icon-shuibei" style="font-size: 28px; color: var(--color-primary); margin-bottom: 8px;"></div>
            <div style="font-size: 15px; font-weight: 500; margin-bottom: 4px;">饮水追踪</div>
            <div style="font-size: 12px; color: var(--color-text-secondary); text-align: center;">记录每日饮水</div>
          </div>
        </div>
        <div class="record-card" style="margin-bottom: 0; cursor: pointer;" onclick="openTool('target')">
          <div style="display: flex; flex-direction: column; align-items: center; padding: 16px 0;">
            <div class="function-icon iconfont icon-mubiao" style="font-size: 28px; color: var(--color-primary); margin-bottom: 8px;"></div>
            <div style="font-size: 15px; font-weight: 500; margin-bottom: 4px;">营养目标</div>
            <div style="font-size: 12px; color: var(--color-text-secondary); text-align: center;">定制摄入目标</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 底部导航 - 固定核心入口，自然交互 -->
  <nav class="bottom-nav">
    <a href="javascript:;" class="nav-item active" onclick="switchBottomNav('home')">
      <div class="nav-icon iconfont icon-shouye"></div>
      <div class="nav-name">首页</div>
    </a>
    <a href="javascript:;" class="nav-item" onclick="switchBottomNav('plan')">
      <div class="nav-icon iconfont icon-riqi"></div>
      <div class="nav-name">计划</div>
    </a>
    <a href="javascript:;" class="nav-item" onclick="switchBottomNav('tools')">
      <div class="nav-icon iconfont icon-gongju"></div>
      <div class="nav-name">实用工具</div>
    </a>
    <a href="{% url 'mobile_member_index' %}" class="nav-item">
      <div class="nav-icon iconfont icon-wode"></div>
      <div class="nav-name">我的</div>
    </a>
  </nav>


</body>

</html>

<!-- 交互脚本 - 自然切换+实用功能 -->
  <script>
    // 页面加载初始化
    document.addEventListener('DOMContentLoaded', function() {
      // 填充当前日期
      const today = new Date().toISOString().split('T')[0];
      document.getElementById('recordDate')?.setAttribute('value', today);
    });

    // 功能栏切换模块
    function switchModule(moduleId) {
      // 切换功能栏选中态
      document.querySelectorAll('.function-item').forEach(item => {
        item.classList.remove('active');
      });
      event.target.closest('.function-item').classList.add('active');
      
      // 切换内容模块
      document.querySelectorAll('.content-module').forEach(module => {
        module.classList.remove('active');
      });
      document.getElementById(moduleId).classList.add('active');
      
      // 同步底部导航（首页对应推荐模块）
      if (moduleId === 'recommend') {
        switchBottomNav('home');
      } else if (moduleId === 'tools') {
        switchBottomNav('tools');
      } else if (moduleId === 'plan') {
        switchBottomNav('plan');
      }
    }

    // 底部导航切换
    function switchBottomNav(navKey) {
      // 切换底部导航选中态
      document.querySelectorAll('.nav-item').forEach(item => {
        item.classList.remove('active');
      });
      event.target.closest('.nav-item').classList.add('active');
      
      // 切换对应模块
      const navMap = {
        'home': 'recommend',
        'plan': 'plan',
        'tools': 'tools'
      };
      const targetModule = navMap[navKey];
      if (targetModule) {
        // 切换功能栏选中态
        document.querySelectorAll('.function-item').forEach(item => {
          item.classList.remove('active');
        });
        // 只有当目标模块在功能栏中存在时才设置选中状态
        const functionItem = document.querySelector(`.function-item[onclick*="${targetModule}"]`);
        if (functionItem) {
          functionItem.classList.add('active');
        }
        
        // 切换内容模块
        document.querySelectorAll('.content-module').forEach(module => {
          module.classList.remove('active');
        });
        document.getElementById(targetModule).classList.add('active');
      }
    }

    // 加入今日计划
    function addToPlan(mealType) {
      const mealMap = {
        'breakfast': '早餐',
        'lunch': '午餐',
        'dinner': '晚餐'
      };
      alert(`已将${mealMap[mealType]}加入今日计划！`);
      // 实际项目可同步更新计划模块
    }

    // 保存饮食记录
    function saveRecord(e) {
      e.preventDefault();
      const date = document.getElementById('recordDate').value;
      const mealType = document.getElementById('mealType').value;
      const content = document.getElementById('mealContent').value;
      
      console.log('保存饮食记录：', { date, mealType, content });
      alert('饮食记录保存成功！已同步至营养分析');
      e.target.reset();
      // 重置日期
      const today = new Date().toISOString().split('T')[0];
      document.getElementById('recordDate').setAttribute('value', today);
    }

    // 打开工具
    function openTool(toolType) {
      const toolMap = {
        'calorie': '热量计算器',
        'bmi': 'BMI计算器',
        'water': '饮水追踪',
        'target': '营养目标'
      };
      alert(`即将打开${toolMap[toolType]}，可在工具中完成对应操作`);
    }

    // 查看详细报告
    function viewDetailReport() {
      alert('正在生成详细营养报告，包含每日摄入趋势、食材分析等');
      // 实际项目可跳转新页面
    }

    // 前往个人中心
    function goToUserCenter() {
      alert('即将跳转至个人中心，可查看个人信息、偏好设置等');
    }
  </script>